<template>
	<footer class="footer">
		<router-link
      class="router-item"
      v-for="item in navs"
      :class="{active: item.path === $route.path || item.path === $route.meta.parent}"
      :key="item.path" :to="item.path">
			<img class="icon" :src="item.icon" alt="">
			<img class="active-icon" :src="item.activeIcon" alt="">
			{{ item.name }}
		</router-link>
	</footer>
</template>
<script>
	import homeActiveIcon from '@/assets/images/home-active-icon.png'
	import homeIcon from '@/assets/images/home-icon.png'
	import myIcon from '@/assets/images/my-icon.png'
	import myActiveIcon from '@/assets/images/my-active-icon.png'
	export default {
		name: 'CommonFooter',
		data: () => ({
			navs: [
				{path: '/home', name: '首页', icon: homeIcon, activeIcon: homeActiveIcon},
				{path: '/my', name: '我的', icon: myIcon, activeIcon: myActiveIcon},
			]
		})
	}
</script>
<style lang="less" scoped>
	.footer {
		display: flex;
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		height: 1.333rem;
    background-color: #fdfafa;
    box-shadow: 0.027rem 0.013rem 0.12rem 0rem
    rgba(10, 2, 4, 0.23);
    .router-item {
			position: relative;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
      font-size: 0.32rem;
			color: #999999;
			img {
				margin-bottom: 0.133rem;
				height: 0.427rem;
			}
			.active-icon {
				display: none;
			}
		}
		.active {
			color: #0c162c;
			.active-icon {
				display: block;
			}
			.icon {
				display: none;
			}
		}
	}
</style>
